<template>
    <div class="page-head-login">
        <div class="page-head-login-logo"></div>
        <!--<div class="page-head-login-version">授权版</div>-->
        <div class="page-head-login-right-wrapper">
            <div class="page-head-login-element-button-wrapper at-right">
                <!--<el-button type="primary" icon="el-icon-back" @click="backToMain">主页</el-button>-->
                <el-popover
                    placement="bottom"
                    popper-class="tipPopover"
                    trigger="manual"
                    v-model="visible"
                    @show="init"
                >
                    <el-badge
                        slot="reference"
                        :value="unReadNum"
                        :hidden="unReadNum === 0"
                        class="item"
                        style="margin-right: 30px"
                    >
                        <!-- <el-button size="small">评论</el-button> -->
                        <i
                            class="el-icon-bell tipIcon"
                            @click="visible = !visible"
                        ></i>
                    </el-badge>
                    <div class="msgWrap">
                        <ul
                            v-infinite-scroll="load"
                            infinite-scroll-disabled="disabled"
                            v-if="msgList.length > 0"
                        >
                            <li
                                v-for="(item, index) in msgList"
                                @click="toDetail(item)"
                                class="list-item"
                                :key="index"
                            >
                                <!-- {{ item }} -->

                                <!-- <el-button type="primary" plain >已读</el-button> -->
                                <div class="rightContent">
                                    <div class="t1">{{ item.title }}</div>
                                    <div class="t2">{{ item.createTime }}</div>
                                </div>
                                <span>
                                    <el-tag
                                        size="mini"
                                        v-if="item.state === 0"
                                        type="danger"
                                        >未读</el-tag
                                    >
                                    <el-tag size="mini" v-else>已读</el-tag>
                                </span>
                            </li>
                            <p
                                style="text-align: center; margin-top: 5px"
                                v-if="loading"
                            >
                                加载中...
                            </p>
                            <p
                                style="text-align: center; margin-top: 5px"
                                v-if="noMore"
                            >
                                没有更多了
                            </p>
                        </ul>
                        <div v-else class="empty">暂无通知</div>
                    </div>
                </el-popover>
                <el-button size="small" type="primary" plain
                    >当前登录：{{ userName }}</el-button
                >
                <!-- <el-button icon="el-icon-back" @click="backToMain">登出</el-button> -->
                <el-button
                    type="success"
                    icon="el-icon-back"
                    @click="backToMain"
                    size="small"
                    >登出</el-button
                >
            </div>
            <!--<div class="page-head-login-element-button-wrapper">-->
            <!--<el-dropdown @command="handleCommand">-->
            <!--&lt;!&ndash;<el-button type="primary">&ndash;&gt;-->
            <!--<el-button>-->
            <!--{{companyName}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
            <!--</el-button>-->
            <!--<el-dropdown-menu slot="dropdown">-->
            <!--<el-dropdown-item command="personalSet">个人设置</el-dropdown-item>-->
            <!--<el-dropdown-item command="esc">退出账户</el-dropdown-item>-->
            <!--</el-dropdown-menu>-->
            <!--</el-dropdown>-->
            <!--</div>-->
            <!--<div class="page-head-login-avatar">-->
            <!--<img v-if="avatar" :src="avatar">-->
            <!--<img v-if="!avatar" src="../../common/pic/avatarDefault.png"/>-->
            <!--</div>-->
        </div>
        <tipDetail
            :value.sync="showDetail"
            :currRow="currRow"
            @refreshList="refreshList"
        ></tipDetail>
    </div>
</template>

<script type="text/ecmascript-6">
// 1、可以退出登录和返回主页面
import tipDetail from './components/tipDetail.vue'
export default {
    data: function () {
        return {
            timeFun: null,
            visible: false,
            currRow: {},
            noMore: false,
            dtWinNumberInfos: [],
            pageIndex: 0,
            unReadNum: 0,
            count: 10,
            showDetail: false,
            loading: false,
            msgList: [],
            total: 0
        }
    },
    computed: {
        hasLogin () {
            return this.$store.state.hasLogin
        },
        disabled () {
            return this.loading || this.noMore
        },
        avatar () {
            return this.$store.state.avatar
        },
        companyName () {
            return this.$store.state.companyName
        },
        userName () {
            return this.$store.state.userName
        }
    },
    created () {
        // this.getList()
        // this.$nextTick(() => {
        //     console.log('this.$refs.gridTable', this.$refs.gridTable)
        //     this.$refs.gridTable.doShow()
        // })
        if (this.timeFun != null) {
            clearInterval(this.timeFun)
        }
        this.timeFun = setInterval(() => {
            this.getMsgNum()
        }, 60000)
    },
    destroyed () {
        clearInterval(this.timeFun)
    },
    methods: {
        toDetail (row) {
            console.log(row)
            this.currRow = row
            this.showDetail = true
        },
        load () {
            console.log('loading', this.loading)
            console.log('noMore', this.noMore)
            if (this.loading || this.noMore) {
                return false
            }
            console.log('6666')
            this.pageIndex++
            this.getList()
        },
        init () {
            this.pageIndex = 0
            this.noMore = false
            this.loading = false
            this.dtWinNumberInfos = []
            this.msgList = []
            this.getList()
        },
        async getMsgNum () {
            const res = await this.$http.post(this.$store.state.IP + '/notify/announce/user/list', {
                plantform: 1,
                size: 10,
                page: this.pageIndex
            })
            let response = res.data
            if (response.ret === '0') {
                this.unReadNum = response.data.unReadNum
            }
        },
        // 获取列表
        async getList () {
            this.loading = true
            const res = await this.$http.post(this.$store.state.IP + '/notify/announce/user/list', {
                plantform: 1,
                size: 10,
                page: this.pageIndex
            })
            let response = res.data
            if (response.ret === '0') {
                let rows = response.data.list
                this.unReadNum = response.data.unReadNum
                if (rows == null || rows.length === 0) {
                    // 加载结束
                    this.noMore = true
                    this.loading = false
                    return
                }
                if (this.pageIndex === 0) {
                    this.msgList = rows
                } else {
                    if (this.msgList.length > response.data.total) {
                        // 最后一页不足10条的情况
                        this.noMore = true
                        this.msgList = rows
                    } else {
                        this.dtWinNumberInfos = this.copyArr(this.msgList)
                        this.msgList = [...this.dtWinNumberInfos, ...rows]
                    }
                }
                this.loading = false
            }
        },
        refreshList () {
            this.init()
        },
        backToMain () {
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/system/loginOut', params).then(response => {
                console.log('-------------------------------------------')
                console.log('调用登出返回')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.$store.dispatch('setHasLogin', false)
                    this.$store.dispatch('agentId', '')
                    this.$router.push('/login')
                    console.log('调用登出成功')
                }
                if (response.ret !== '0') {
                    console.log('调用登出失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    },
    components: {
        tipDetail
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.empty
    text-align: center
    color: #999
    position: absolute
    top: 45%
    margin: 0 auto
    width: 100%

.oe
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis

::-webkit-scrollbar
    width: 7px
    height: 7px

/* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)
    border-radius: 10px

/* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb
    border-radius: 10px
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)

.readIcon
    font-size: 20px
    margin-right: 10px

.msgWrap
    width: 300px
    height: 300px
    overflow: auto

    .list-item:active
        background: red

    .list-item
        padding: 12px 24px
        border-bottom: 1px solid #e8eaec
        cursor: pointer
        -webkit-transition: background-color 0.2s ease-in-out
        transition: background-color 0.2s ease-in-out
        text-align: left
        display: flex
        align-items: center
        justify-content: space-between

        &:hover
            background: #eff5f5

        .t1
            font-size: 14px
            font-weight: 400
            line-height: 22px
            color: #515a6e

        .t2
            font-size: 12px
            color: #808695

.tipIcon
    font-size: 30px
    cursor: pointer
    color: #606266

.page-head-login
    width: 100%
    height: 64px
    position: relative
    background: #fff

    .page-head-login-logo
        position: absolute
        top: 15px
        left: 20px
        height: 43px
        width: 283px
        background-image: url('../../common/pic/page_logo.png')
        background-size: 230px 43px
        background-repeat: no-repeat
        cursor: pointer

    .page-head-login-version
        height: 22px
        width: 55px
        line-height: 22px
        text-align: center
        color: #fff
        background: #48ace6
        border-radius: 3px
        position: absolute
        top: 16px
        left: 350px

    .page-head-login-right-wrapper
        position: absolute
        right: 42px
        top: 0
        height: 64px

        .page-head-login-avatar
            margin-top: 15px
            margin-right: 10px
            float: right
            display: inline-block
            border-radius: 50%
            height: 34px
            width: 34px

            img
                width: 34px
                height: 34px
                border-radius: 50%

        .page-head-login-element-button-wrapper
            margin-top: 15px
            display: inline-block
            float: right
            margin-right: 22px

            &.at-right
                margin-right: 0
                margin-top: 15px

    .page-head-login-right-wrapper-in
        position: absolute
        right: 22px
        top: 0
        height: 64px

        .page-head-login-avatar
            margin-top: 15px
            margin-right: 10px
            float: right
            display: inline-block
            border-radius: 50%
            height: 34px
            width: 34px

            img
                width: 34px
                height: 34px
                border-radius: 50%

        .page-head-login-element-button-wrapper
            margin-top: 15px
            display: inline-block
            float: right
            margin-right: 22px

            &.at-right
                margin-right: 0
                margin-top: 15px
</style>
